<template>
    <div class="list">
        <ul >
            <li v-for="(item, key) of citys" :key="key" @click="handleletterclick">{{key}}</li>
        </ul>
    </div>
</template>

<script>
export default {
  name: 'zimu',
  props: {
    citys: Object
  },
  methods: {
    handleletterclick (e) {
      this.$emit('change', e.target.innerText)
    }
  }
}
</script>

<style lang='stylus' scoped>
  .list
    position absolute
    right 0
    width .4rem
    top 1.5rem
    bottom 0
    display flex
    flex-direction column
    justify-content center
    li
      color blue
      margin .1rem .1rem

</style>
